<template>
  <div class="dist-translation">
    <el-card shadow="hover" class="dist-card">
    <div class="dist-header">
      <el-select 
        v-model="selectedDistLanguage" 
        placeholder="选择目标语种"
        class="dist-language-select"
      >
        <el-option
          v-for="(name, code) in distLanguages"
          :key="code"
          :label="name"
          :value="code"
        />
      </el-select>
      <el-popover
        placement="bottom"
        :width="300"
        trigger="click"
        popper-class="translation-preference-popover"
      >
        <template #reference>
          <el-button class="preference-btn" type="info" plain>
            {{ formattedPreference }}
          </el-button>
        </template>
        <div class="preference-container">
          <div class="preference-item">
            <span class="preference-label">长度：</span>
            <el-radio-group v-model="lengthPreference" size="small">
              <el-radio-button v-for="option in lengthOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio-button>
            </el-radio-group>
          </div>
          <div class="preference-item">
            <span class="preference-label">语气：</span>
            <el-radio-group v-model="tonePreference" size="small">
              <el-radio-button v-for="option in toneOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio-button>
            </el-radio-group>
          </div>
          <div class="preference-item">
            <span class="preference-label">风格：</span>
            <el-radio-group v-model="stylePreference" size="small">
              <el-radio-button v-for="option in styleOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio-button>
            </el-radio-group>
          </div>
          <div class="preference-item">
            <span class="preference-label">复杂度：</span>
            <el-radio-group v-model="complexityPreference" size="small">
              <el-radio-button v-for="option in complexityOptions" :key="option.value" :label="option.value">{{ option.label }}</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </el-popover>
      <el-button 
        type="primary" 
        @click="handleDistTranslate"
        class="dist-translate-btn"
      >
        翻译
      </el-button>
      <el-button 
        v-if="showDelete"
        type="danger" 
        plain
        @click="handleDelete"
        class="dist-delete-btn"
      >
        删除
      </el-button>
    </div>
    
    <div class="dist-content">
      <el-input
        id="txtResult"
        v-model="translationResult"
        type="textarea"
        :rows="10"
        placeholder="翻译结果将显示在这里"
        readonly
        :loading="isTranslating"
      >
        <template #prepend v-if="isTranslating">
          <el-icon class="is-loading"><i class="el-icon-loading"></i></el-icon>
        </template>
      </el-input>
    </div>
    
    <div class="dist-footer">
      <span class="char-count">字符数：{{ charCount }}</span>
      <div class="dist-actions">
        <el-button 
          size="small" 
          @click="handleClear"
          class="dist-clear-btn"
        >
          清空
        </el-button>
        <el-button 
          size="small" 
          type="primary" 
          plain
          @click="handleCopy"
          class="dist-copy-btn"
        >
          复制
        </el-button>
      </div>
    </div>
    </el-card>
  </div>
</template>


// 添加样式到组件
<style scoped>
.dist-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dist-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.dist-language-select {
  width: 140px;
}

.dist-content {
  flex: 1;
  margin-bottom: 15px;
}

.dist-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dist-actions {
  display: flex;
  gap: 10px;
}

.char-count {
  color: #909399;
  font-size: 12px;
}

.preference-container {
  padding: 10px;
}

.preference-item {
  margin-bottom: 15px;
}

.preference-label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #606266;
}

.preference-btn {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 添加过渡效果 */
.el-input__inner:focus,
.el-select:hover .el-input__inner {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.el-button {
  transition: all 0.3s;
}

.el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue';
import { DistLanguages } from '../config/languages';
import { ElMessage } from 'element-plus';

export default defineComponent({
  name: 'DistTranslation',
  props: {
    showDelete: {
      type: Boolean,
      default: false
    },
    translationResult: {
      type: String,
      default: ''
    },
    selectedDistLanguage: {
      type: String,
      default: 'en-US'
    },
    isTranslating: {
      type: Boolean,
      default: false
    },
    translationPreference: {
      type: String,
      default: 'standard-neutral-literal-standard'
    }
  },
  emits: ['delete', 'update:selectedDistLanguage', 'update:translationPreference'],
  setup(props, { emit }) {
    const distLanguages = DistLanguages;
    const selectedDistLanguage = ref(props.selectedDistLanguage);
    const translationResult = ref(props.translationResult);
    
    // 翻译偏好选项
    const lengthOptions = [
      { label: '标准', value: 'standard' },
      { label: '简短', value: 'short' },
      { label: '扩展', value: 'extended' }
    ];
    
    const toneOptions = [
      { label: '中性', value: 'neutral' },
      { label: '随意', value: 'casual' },
      { label: '正式', value: 'formal' }
    ];
    
    const styleOptions = [
      { label: '直译', value: 'literal' },
      { label: '意译', value: 'free' },
      { label: '创意改编', value: 'creative' }
    ];
    
    const complexityOptions = [
      { label: '标准', value: 'standard' },
      { label: '通俗', value: 'simple' },
      { label: '专家', value: 'expert' }
    ];
    
    // 解析传入的偏好字符串
    const parsePreference = (prefString: string) => {
      const parts = prefString.split('-');
      return {
        length: parts[0] || 'standard',
        tone: parts[1] || 'neutral',
        style: parts[2] || 'literal',
        complexity: parts[3] || 'standard'
      };
    };
    
    // 初始化各个偏好选项
    const initialPrefs = parsePreference(props.translationPreference);
    const lengthPreference = ref(initialPrefs.length);
    const tonePreference = ref(initialPrefs.tone);
    const stylePreference = ref(initialPrefs.style);
    const complexityPreference = ref(initialPrefs.complexity);
    
    // 监听props变化，更新本地状态
    watch(() => props.translationResult, (newValue) => {
      translationResult.value = newValue;
    });
    
    watch(() => props.selectedDistLanguage, (newValue) => {
      selectedDistLanguage.value = newValue;
    });
    
    watch(() => props.translationPreference, (newValue) => {
      const prefs = parsePreference(newValue);
      lengthPreference.value = prefs.length;
      tonePreference.value = prefs.tone;
      stylePreference.value = prefs.style;
      complexityPreference.value = prefs.complexity;
    });
    
    // 监听本地状态变化，通知父组件
    watch(selectedDistLanguage, (newValue) => {
      emit('update:selectedDistLanguage', newValue);
    });
    
    // 组合偏好并通知父组件
    const updatePreference = () => {
      const combined = `${lengthPreference.value}-${tonePreference.value}-${stylePreference.value}-${complexityPreference.value}`;
      emit('update:translationPreference', combined);
    };
    
    // 监听各个偏好的变化
    watch([lengthPreference, tonePreference, stylePreference, complexityPreference], () => {
      updatePreference();
    });
    
    // 格式化显示的偏好文本
    const getOptionLabel = (options, value) => {
      const option = options.find(opt => opt.value === value);
      return option ? option.label : '';
    };
    
    const formattedPreference = computed(() => {
      const lengthLabel = getOptionLabel(lengthOptions, lengthPreference.value);
      const toneLabel = getOptionLabel(toneOptions, tonePreference.value);
      const styleLabel = getOptionLabel(styleOptions, stylePreference.value);
      const complexityLabel = getOptionLabel(complexityOptions, complexityPreference.value);
      
      return `${lengthLabel}-${toneLabel}-${styleLabel}-${complexityLabel}`;
    });
    
    const charCount = computed(() => {
      return translationResult.value.length;
    });
    
    const handleDistTranslate = () => {
      // 发出事件通知父组件需要翻译
      emit('update:selectedDistLanguage', selectedDistLanguage.value);
      updatePreference();
    };
    
    const handleDelete = () => {
      emit('delete');
    };
    
    const handleClear = () => {
      translationResult.value = '';
    };
    
    const handleCopy = () => {
      navigator.clipboard.writeText(translationResult.value)
        .then(() => {
          ElMessage.success('已复制到剪贴板');
        })
        .catch(() => {
          ElMessage.error('复制失败');
        });
    };
    
    return {
      distLanguages,
      selectedDistLanguage,
      translationResult,
      charCount,
      lengthPreference,
      tonePreference,
      stylePreference,
      complexityPreference,
      lengthOptions,
      toneOptions,
      styleOptions,
      complexityOptions,
      formattedPreference,
      handleDistTranslate,
      handleDelete,
      handleClear,
      handleCopy
    };
  }
});
</script>

<style scoped>
.dist-translation {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  transition: all 0.3s ease;
}

.dist-translation:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.dist-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background-color: #f0f2f5;
  border-bottom: 1px solid #e6e8eb;
}

.dist-language-select {
  flex: 1;
}

.dist-language-select :deep(.el-input__wrapper) {
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dist-language-select :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.preference-btn {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.dist-translate-btn,
.dist-delete-btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.dist-translate-btn:hover,
.dist-delete-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.preference-container {
  padding: 16px;
  border-radius: 8px;
}

.preference-item {
  margin-bottom: 16px;
}

.preference-item:last-child {
  margin-bottom: 0;
}

.preference-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #303133;
}

.dist-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
  background-color: #fff;
}

.dist-content :deep(.el-textarea__inner) {
  border-radius: 8px;
  font-family: 'Inter', Arial, sans-serif;
  line-height: 1.6;
  padding: 12px 16px;
  transition: all 0.2s ease;
  border-color: #dcdfe6;
  min-height: 200px;
}

.dist-content :deep(.el-textarea__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.dist-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #f0f2f5;
  border-top: 1px solid #e6e8eb;
  font-size: 14px;
  color: #606266;
}

.dist-actions {
  display: flex;
  gap: 12px;
}

.dist-actions :deep(.el-button) {
  border-radius: 6px;
  transition: all 0.2s ease;
}

.dist-actions :deep(.el-button:hover) {
  transform: translateY(-1px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dist-header {
    flex-wrap: wrap;
  }
  
  .dist-language-select {
    flex-basis: 100%;
    margin-bottom: 8px;
  }
  
  .preference-btn {
    flex-grow: 1;
  }
}
</style>